@import "config.less";

html,body{
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #f6f6f6;
    -webkit-text-size-adjust:none;
}
.clear{
    zoom:1;
}
.clear:after{
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.aaa{
    .my-oval-btn();
}
//-----------------------按钮、小零件-------------------------
.p-lable1{
    display: inline-block;
    .px2rem(height,34);
    .px2rem(padding-left,18);
    .px2rem(padding-right,18);
    border:1px solid @main-blue;
    .px2rem(border-radius,17);
    .px2px(font-size,26);
    .px2px(line-height,34);
    color:@main-blue;
    text-align: center;
}
.p-btn1{
    display: inline-block;
    .px2rem(width,346);
    .px2rem(height,46);
    .px2rem(padding-left,18);
    .px2rem(padding-right,18);
    border:2px solid @main-blue;
    .px2px(font-size,26);
    .px2px(line-height,46);
    color:@main-blue;
    text-align: center;
    vertical-align:bottom;//inline-block  加overflow hidden 会导致对齐偏移
    .my-ellipsis;
}
.p-btn1-a{
    display: inline-block;
    .px2rem(min-width,196);
    .px2rem(height,46);
    .px2rem(padding-left,18);
    .px2rem(padding-right,18);
    border:2px solid @main-blue;
    .px2px(font-size,26);
    .px2px(line-height,46);
    color:@main-blue;
    text-align: center;
    vertical-align:bottom;//inline-block  加overflow hidden 会导致对齐偏移
    .my-ellipsis;
}
.p-btn2{
    display: inline-block;
    .px2rem(width,250);
    .px2rem(height,70);
    background-color: #ffffff;
    .px2rem(border-radius,35);
    .set-font(middle,30,70,@text-color);
    text-align: center;
}
// ------------------------模块 module -------------------------
//列表1
.m-list1{
    position: relative;
    .padding-l-r(30,0);
    background-color: #ffffff;
}
.m-list1-icon{
    float:left;
    .px2rem(width,90);
    .px2rem(height,90);
    .px2rem(border-radius,45);
    box-shadow:0 0 20px #ace8ff;
    text-align: center;
    .iconfont{
        transform: rotate(270deg);
        display: block;
        .px2px(font-size,26);
        .px2rem(line-height,90);
        color:@main-blue;
    }
}
.m-list1-icon1{
    float:left;
    position: relative;
    .px2rem(width,90);
    .px2rem(height,90);
    .px2rem(border-radius,45);
    text-align: center;
    .iconfont{
        position: absolute;
        top:36%;
        left:36%;
        transform: rotate(270deg);
        .set-font(agr,26,rgba(255,255,255,0.8));
    }
}
.m-list1-img{
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
}
.m-list1-info{
    position: relative;
    // box-sizing:border-box;
    .px2rem(width,572);
    .px2rem(padding-left,20);
    .px2rem(padding-bottom,30);
    .px2rem(margin-left,110);
    .px2rem(margin-bottom,30);
    border-bottom: 1px solid #d7d7d7;
}
.m-list1-title{
    .px2rem(height,34);
    .px2rem(margin-bottom,28);
    .set-font(agr,32,@text-color);
    .my-ellipsis;
}
.m-list1-mation{
    .px2rem(height,28);
    .set-font(middle,26,28,@text-color1);
    vertical-align: top;
    overflow: hidden;
    .iconfont{
        display: inline-block;
        .px2rem(margin-right,20);
        .set-font(middle,20,28,@text-color1);
    }
    .span{
        display: inline-block;
        .px2rem(margin-right,50);
    }
}
.m-list1-hint{
    position: absolute;
    right:0;
    top:0;
    z-index:2;
    .px2rem(width,100);
    .px2rem(height,32);
    border-radius: 4px;
    .px2rem(line-height,32);
    background-color:#76cf6f;
    color:#ffffff;
    text-align: center;
}
//列表2
.m-list2{
    position: relative;
    .px2rem(width,702);
    margin:0 auto;
    .px2rem(padding-top,24);
    .px2rem(padding-bottom,24);
    background-color: #ffffff;
    border-bottom:1px solid #d7d7d7;
}
.m-list2-icon{
    float:left;
    display: block;
    .px2rem(width,150);
    .px2rem(height,150);
}
.m-list2-title{
    box-sizing:border-box;
    .px2rem(width,512);
    .px2rem(margin-left,190);
    .px2rem(margin-bottom,40);
    .set-font(agr,32,@text-color);
    .my-ellipsis;
}
.m-list2-user{
    box-sizing:border-box;
    .px2rem(width,512);
    .px2rem(margin-left,190);
    .px2rem(margin-bottom,22);
    .set-font(agr,28,@text-color2);
    .my-ellipsis;
}
.m-list2-user1{
    box-sizing:border-box;
    .px2rem(width,512);
    .px2rem(margin-left,190);
    .px2rem(margin-bottom,22);
    .set-font(agr,28,@main-blue);
    .my-ellipsis;
}
.m-list2-mation{
    box-sizing:border-box;
    .px2rem(width,512);
    .px2rem(margin-left,190);
    .set-font(agr,28,@main-blue);
    .my-ellipsis;
}
.m-list2-mation1{
    box-sizing:border-box;
    .px2rem(width,512);
    .px2rem(margin-left,190);
    .set-font(agr,28,@text-color2);
    .my-ellipsis;
}
.m-list2-link{
    position: absolute;
    right:0;
    top:50%;
    transform: translateY(-50%);
    .px2rem(width,40);
    .px2rem(height,40);
    background-color:#d7d7d7;
    .px2rem(border-radius,20);

    .div{
        position: absolute;
        top:30%;
        left:24%;
        transform:rotate(315deg);
        .px2rem(width,14);
        .px2rem(height,14); 
        border-right:4px solid #ffffff;
        border-bottom:4px solid #ffffff;
    }
}
//列表3
.m-list3{
    position: relative;
    .padding-l-r(24,24);
    background-color: #ffffff;
    border-bottom: 2px solid @border-color;
}
.m-list3-icon{
    float:left;
    display: block;
    .px2rem(width,100);
    .px2rem(height,100);
    border-radius: 50%;
}
.m-list3-title{
    .px2rem(padding-left,150);
    .set-font(middle,32,50,@text-color);
}
.m-list3-mation{
    .px2rem(padding-left,150);
    .px2rem(margin-top,16);
    .set-font(agr,26,@border-color);

    .list{
        display: inline-block;
        .px2rem(margin-right,64);
    }
}
//列表4
.m-list4{
    position: relative;
    .px2rem(margin-bottom,10);
}
.m-list4-icon{
    position: relative;
    display: block;
    .px2rem(width,750);
    .px2rem(height,350);
}
.m-list4-title{
    position: absolute;
    .px2rem(top,254);
    left:0;
    z-index: 3;
    display: block;
    box-sizing: border-box;
    width: 100%;
    .padding-l-r(10,10);
    background-color: rgba(0,0,0,0.3);
    .set-font(middle,26,38,#ffffff);
    overflow: hidden;
}
.m-list4-mation{
    .padding-l-r(5);
    .set-font(middle,26,76,@text-color);
}
.m-list4-mation-r{
    float:right;
}
.m-list4-lable{
    .padding-l-r(0,30);
    .p-lable1{
        .px2rem(margin-right,16);
        .px2rem(margin-bottom,6);
    }
}
//列表5
.m-list5{
    position: relative;
    .padding-l-r(30);
    background-color: #ffffff;
    border-bottom:1px solid @border-color;
}
.m-list5-title{
    position: relative;
    .px2rem(width,702);
    .px2rem(height,32);
    .margin-a(0,30);
    .set-font(agr,32,@text-color);
}
.m-list5-mation{
    .px2rem(width,702);
    .px2rem(height,28);
    .margin-a(0,26);
    .set-font(middle,26,28,@text-color1);
    vertical-align: top;
    overflow: hidden;
    .iconfont{
        display: inline-block;
        .px2rem(margin-right,20);
        .set-font(middle,20,28,@text-color1);
    }
    .span{
        display: inline-block;
        .px2rem(margin-right,50);
    }
}
.m-list5-time{
    .px2rem(width,702);
    .margin-a(0,26);
   .set-font(agr,26,@text-color2);
}
.m-list5-play{
    box-sizing: border-box;
    position: absolute;
    top: 50%;
    .px2rem(right,24);
    transform: translate(0,-50%);
    .px2rem(width,50);
    .px2rem(height,50);
    background-color: #ffffff;
    border:2px solid @main-blue;
    border-radius:50%;
    color:@main-blue;

    .iconfont{
        .set-font(agr,20);
        position: absolute;
        top: 30%;
        left: 30%;
        transform: rotate(270deg);
    }
}
.m-list5-hint-g{
    display: inline-block;
    .px2rem(width,100);
    .px2rem(height,32);
    .px2rem(margin-left,32);
    border-radius: 4px;
    .set-font(agr,30,#ffffff);
    .px2rem(line-height,32);
    background-color:#76cf6f;
    text-align: center;
}
.m-list5-hint-b{
    display: inline-block;
    .px2rem(width,100);
    .px2rem(height,32);
    .px2rem(margin-left,32);
    border-radius: 4px;
    .set-font(agr,30,#ffffff);
    .px2rem(line-height,32);
    background-color:@main-blue;
    text-align: center;
}
.m-list5-hint-r{
    display: inline-block;
    .px2rem(width,100);
    .px2rem(height,32);
    .px2rem(margin-left,32);
    border-radius: 4px;
    .set-font(agr,30,#ffffff);
    .px2rem(line-height,32);
    background-color:#fb7777;
    text-align: center;
}

//评论列表  暂时未全部优化确定实际情况后修改
.m-commlist{
    .px2rem(width,702);
    margin:0 auto;
    border-bottom:1px solid @border-color;
    .m-commlist-main{
        .px2rem(width,642);
        .px2rem(margin-left,60);
        .main-top{
            .px2rem(padding-left,20);         

            .time{
                .px2rem(height,20);
                .set-font(agr,20,@text-color1);
            }
            .status{
                .px2rem(height,40);
                .set-font(agr,26,@text-color);

                span{
                    vertical-align: bottom;
                }
                img{
                    display: inline-block;
                    .px2rem(height,26);
                    .px2rem(margin-left,20);
                    vertical-align: bottom;
                }
                .zan{
                    float:right;
                    display: inline-block;
                    .px2rem(height,40);
                    vertical-align: bottom;

                    i{
                        .set-font(middle,34,40,@text-color2)
                    }
                    span{
                        .set-font(middle,34,40,@text-color2)
                    }
                }
            }
            .status:after{
                content:"";
                display: inline-block;
                width:0;
                height: 100%;
                vertical-align:bottom;
                visibility: hidden;
            }
        }
        .main-comment{
            .px2rem(margin-top,16);
            .px2rem(padding,20);
            background-color: @comment-color;

            .main-comment-top{
                
                span{
                    float:left;
                    display: inline-block;
                    .set-font(agr,26,@text-color);
                    font-weight: 600;
                }
                img{
                    float:left;
                    display: inline-block;
                    .px2rem(height,26);
                    .px2rem(margin-left,20);
                }
            }
            .main-comment-main{
                display: inline-block;
                width: 100%;
                .px2rem(padding-top,30);
                .px2rem(padding-bottom,15);
                .set-font(middle,28,40,@text-color2);
            }
        }
        .main-text{
            display: inline-block;
            .px2rem(padding,20);
            .set-font(middle,28,38,@text-color2);
        }
    }
}
.m-commlist-icon{
    float:left;
    display: block;
    .px2rem(width,60);
    .px2rem(height,60);
    border-radius: 50%;
}
//底部提示下载按钮
.mod-bottom-link{
    position: fixed;
    bottom:0;
    left:0;
    z-index:100;
    display:block;
    width: 100%;
    .px2rem(height,90);
    background-color: @main-blue;
    .px2px(font-size,28);
    .px2rem(line-height,90);    
    color:#ffffff;
    text-align: center;
}

//切换选择
.m-switch1{
    display:-ms-flex;
    display:-o-flex;
    display:-moz-flex;
    display:-webkit-flex;
    display:flex;
    width: 100%;
    .px2rem(heigth,90);
    background-color: #ffffff;
    .set-font(middle,32,50,@text-color);
    text-align: center;
}
.m-switch1-case{
    flex:1;
    .px2rem(padding-top,20);
    .px2rem(padding-bottom,20);
    border-bottom:1px solid @border-color;
}
.m-switch1-case.active{
    border-bottom:1px solid @main-blue;
    color:@main-blue;
}
.m-switch1-text{
    border-right:1px solid @border-color;
}

//分享弹框
.m-share{
    display:-webkit-flex;
    display:flex;
    -webkit-justify-content:space-between;
    justify-content:space-between;
    .padding-w(70,40,70,40);
    background-color: #ffffff;
    text-align: center;
}
.m-share-item{
    .px2rem(width,100);
    .px2rem(padding-top,100);
    .set-font(middle,28,108,@text-color);    
}
.m-share-icon{
    display: block;
    .px2rem(width,100);
    .px2rem(height,100);
    .margin-a();
}